<template>
	<view class="container_sdgfds" :style="{'height':height + 'px'}">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 	<image src="../../../static/user_bg.jpg" mode=" " style="width: 100%;height: 300rpx;" @click="classfiyMen(100)"></image>
		<view class="text-white flex padding" style="background-color: #0054A7;margin-top: -30rpx;" @click="classfiyMen(6)">
			<image :src="image+userInfoData.img" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #F1F1F1;"></image>
			<view class="margin-left">
				<view class="fs26 ">手机号：{{userInfoData.tel}}</view>
				<view class="fs26">用户名：{{userInfoData.name}}</view>
				<view class="fs26">积分：{{userInfoData.integral}}</view>
			</view>
		</view> -->
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="header_user colfff">
			<view class="justify-end padding-right padding-top" @click="classfiyMen(100)">
				<image src="/static/xiicon-xiaoxi.png" mode="" style="height: 40rpx;width: 40rpx;"></image>
			</view>
		</view>
		<view class="text-white flex padding" style="background-color: #0054A7;" @click="classfiyMen(6)">
			<image :src="image+userInfoData.img" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #F1F1F1;"></image>
			<view class="margin-left">
				<view class="fs26 ">手机号：{{userInfoData.tel}}</view>
				<view class="fs26">用户名：{{userInfoData.name}}</view>
				<view class="fs26">积分：{{userInfoData.integral}}</view>
			</view>
		</view> -->
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<!-- <view class="header_user colfff">
			<view class="justify-end padding-right padding-top" @click="classfiyMen(100)">
				<image src="/static/xiicon-xiaoxi.png" mode="" style="height: 40rpx;width: 40rpx;"></image>
			</view>
		</view>
		<view class="text-white flex padding" style="background-color: #0054A7;" @click="classfiyMen(6)">
			<image :src="image+userInfoData.img" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #F1F1F1;"></image>
			<view class="margin-left">
				<view class="fs26 ">手机号：{{userInfoData.tel}}</view>
				<view class="fs26">用户名：{{userInfoData.name}}</view>
				<view class="fs26">积分：{{userInfoData.integral}}</view>
			</view>
		</view> -->
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<!-- <view class="header_user colfff">
			<view class="justify-end padding-right padding-top" @click="classfiyMen(100)">
				<image src="/static/xiicon-xiaoxi.png" mode="" style="height: 40rpx;width: 40rpx;"></image>
			</view>
		</view>
		<view class="text-white flex padding" style="background-color: #0054A7;" @click="classfiyMen(6)">
			<image :src="image+userInfoData.img" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #F1F1F1;"></image>
			<view class="margin-left">
				<view class="fs26 ">手机号：{{userInfoData.tel}}</view>
				<view class="fs26">用户名：{{userInfoData.name}}</view>
				<view class="fs26">积分：{{userInfoData.integral}}</view>
			</view>
		</view> -->
		<!-- #endif -->

		<view class="user_body">
			<view class="align-center" @click="classfiyMen(6)">
				<image
					:src="userInfoData.img?image+userInfoData.img:'https://img0.baidu.com/it/u=1489807627,808259306&fm=26&fmt=auto'"
					mode="aspectFill" class="user_image"></image>
				<view class="margin-left">
					<view class="user_name">{{userInfoData.name ||'游客'}}</view>
					<view class="user_phone">手机号：{{userInfoData.tel || '000-000-000'}}</view>
					<view class="user_integral">积分：{{userInfoData.integral ||'0.00'}}</view>
				</view>
			</view>
			<view class="conraineersfd margin-top-xl">
				<view class="rowsb content_header">
					<view class="content_header_name">我的订单</view>
					<view class="content_header_namea" @click="classfiyMen(1)">查看全部订单</view>
				</view>
				<view class="containers">
					<view class="rowsa orderss">
						<view v-for="(item,index) in orderImg" :key="index" @click="classfiyMen(item.idd)">
							<image :src="item.img" class="orders_img"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="conraineersfd" style="margin-bottom: 200rpx;">
				<view class="containers">
					<view class="bottom_title pdTop20">常用工具</view>
					<view class="rows container_zhongxins">
						<view class="container_zhongxin" v-for="(item,index) in tools" :key="index"
							@click="classfiyMen(item.idd)">
							<view>
								<image :src="item.img" class="container_total_two"></image>
							</view>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		userInfo
	} from '../../../common/path.js'
	export default {
		data() {
			return {
				height: '0', //设备高德
				orderImg: [{
						name: '待付款',
						idd: '1',
						img: '/static/icon/iicon_daifukuan.png'
					},
					{
						name: '待发货',
						idd: '2',
						img: '/static/icon/icon_daifahuo.png'
					},
					{
						name: '待收货',
						idd: '3',
						img: '/static/icon/icon_daishouhuo.png'
					},
					{
						name: '已收货',
						idd: '4',
						img: '/static/icon/icon_yiwencheng.png'
					},
					{
						name: '售后服务',
						idd: '5',
						img: '/static/icon/icon_shouhou.png'
					},
				],
				tools: [{
						name: '资料完善',
						idd: '6',
						img: '/static/icon/icon_ziliaowanshan.png'
					},
					{
						name: '地址管理',
						idd: '7',
						img: '/static/icon/icon_dizhiguanli.png'
					},
					// {
					// 	name: '我的分享',
					// 	idd: '8',
					// 	img: '/static/user/icon_wodefx.png'
					// },
					{
						name: '积分商城',
						idd: '9',
						img: '/static/icon/icon_jifenshangcheng.png'
					},
					{
						name: '关于我们',
						idd: '10',
						img: '/static/icon/icon_guanyuwomen.png'
					},
					{
						name: '在线客服',
						idd: '11',
						img: '/static/icon/icon_zaixiankefu.png'
					},
					{
						name: '教练中心',
						idd: '12',
						img: '/static/icon/icon_jiaolianzhoingxin.png'
					},
					{
						name: '设置',
						idd: '13',
						img: '/static/icon/icon_shezhi.png'
					},
					{
						name: '约车记录',
						idd: '14',
						img: '/static/icon/icon_yuechejilv.png'
					},

				],
				image: '',
				userInfoData: [], //用户信息
			}
		},
		onShow() {
			console.log('用户----------->', app.userInfo);
			if (uni.getStorageSync('userInfo') == '') {
				this.$tools.showToast('请登录')
				uni.reLaunch({
					url: '../../login/login'
				})


			} else {
				this.userInfo()
			}
			this.image = app.image
		},
		onReady() {
			this.height = uni.getSystemInfoSync().windowHeight; //设备高德
		},
		methods: {
			userInfo() {
				let data = {
					id: app.userInfo.id
				}
				this.$axios.axios('POST', userInfo, data)
					.then(res => {
						console.log('获取到的用户信息', res.data);
						this.userInfoData = res.data
						uni.setStorageSync('userInfo', res.data)
						app.userInfo = res.data
					})
					.catch(err => {
						console.log(err);
					})
			},
			classfiyMen(idd) {
				let that = this

				if (!uni.getStorageSync('userInfo')) {
					that.Router('/pages/login/login')
					return
				}
				//订单
				if (idd <= 5) {
					that.Router('../../order/orders?id=' + idd)
				} else if (idd == 6) {
					if (uni.getStorageSync('userInfo')) {
						that.Router('/pages/my/userUpdate')
					} else {
						that.Router('/pages/login/login')
					}
				} else if (idd == 7) {
					that.Router('../../address/address')
				} else if (idd == 8) {
					that.Router('/pages/my/share')
				} else if (idd == 9) {
					that.Router('../integralCenter/integralCenter')
				} else if (idd == 10) {
					that.Router('../../plugins/agreement?title=' + '关于我们' + "&id=" + 3)
				} else if (idd == 11) {
					that.Router('../../plugins/agreement?title=' + '客服' + "&id=" + 4)
				} else if (idd == 12) {
					//教练中心
					that.Router('../coachCenter/coachCenter')
				} else if (idd == 13) {
					//教练中心
					that.Router('/pages/my/setter')
				} else if (idd == 14) {
					//教练中心
					that.Router('/pages/my/appointCar')
				} else if (idd == 15) {
					//教练中心
					that.Router('../../cart/cart')
				} else if (idd == 100) {
					that.Router('../meNews')
				}
			},
			Router(Routertext) {
				uni.navigateTo({
					url: Routertext
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	//头部
	.user_body {
		width: 750rpx;
		height: 306rpx;
		background: #0054A7;
		padding: 30rpx;

		.user_image {
			width: 132rpx;
			height: 132rpx;
			background: #E3E8EF;
			border-radius: 50%;
		}

		.user_name {
			width: 108rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.user_phone {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.7;
		}

		.user_integral {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.7;
		}
	}




	page {
		padding-bottom: 200rpx;
	}

	.header_user {
		background-image: url(../../../static/user_bg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 300rpx;
	}

	.content_header_namea {
		font-size: 26rpx;
		color: #999999;
	}

	.content_header_imga {
		width: 10rpx;
		height: 20rpx;
		margin-top: 2rpx;
		margin-left: 8rpx;
	}

	.content_header_name {
		font-size: 30rpx;
		color: #555555;
		font-weight: bold;
	}

	.content_header {
		padding: 20rpx 30rpx;
		border-bottom: 3rpx solid #f1f1f1;
	}

	.containers {
		padding: 0rpx 20rpx;
	}

	.orderss {
		text-align: center;
		padding: 22rpx 0rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.orders_img {
		width: 58rpx;
		height: 58rpx;
		margin-bottom: 6rpx;
	}

	.container_sdgfds {
		width: 750rpx;
		background-color: #F1F1F1;
	}

	.conraineersfd {
		background-color: #FFFFFF;
		width: 678rpx;
		// height: 250rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.bottom_title {
		font-size: 30rpx;
		color: #666666;
		font-weight: bold;
		margin-top: 58rpx;
	}

	.container_zhongxin {
		flex: 0 0 25%;
		margin: 20rpx 0rpx;
	}

	.container_zhongxins {
		text-align: center;
		/* padding: 24rpx 0; */
		font-size: 26rpx;
		color: #666666;
		flex-wrap: wrap;
	}

	.container_total_two {
		width: 50rpx;
		height: 50rpx;
	}
</style>
